<template>
	<view class="page">
		
		<scroll-view class="scrollList"   scroll-y  @scrolltolower="scrolltolower" >
			<uni-search-bar ref="searchBar" placeholder="搜索" bgColor="#F7F7F7" :show="false" @confirm="search"
				@search="search">
			</uni-search-bar>
			<view class="uni-list">
		
					<block v-for="(item, key) in keyword" :key="key">
						<view class="uni-list-cell"
						hover-class="none"
						>
							<checkbox-group @change="change(item.user_id + '')">
								<label class="uni-list-cell uni-list-cell-pd">
									<view>
										<checkbox color="#02b300"
										:value="item.user_id + ''"
										/>
									</view>
									<view class="uni-media-list">
										<view class="uni-media-list-logo">
											<image :src="staticPhoto + item.photo" :lazy-load="true"/>
										</view>
										<view class="uni-media-list-body">
											<view class="uni-list-cell-navigate">{{item.nickname}}</view>
										</view>
									</view>
								</label>
							</checkbox-group>
							
						</view>
						
					</block>
			</view>
		</scroll-view>
		
	</view>
</template>

<script>
	
	import _get from '../../../common/_get';
	import _hook from '../../../common/_hook';
	import _data from '../../../common/_data';
	import uniSearchBar from '@/components/mehaotian-search/mehaotian-search.vue'
	export default {
		components: {
			uniSearchBar
		},
		data() {
			return {
				list_data: [],				
				list_id: 0,
				add_user_ids: [],
				keyword:[],
				page:1,
				itemHeight: 0,
				winHeight: 0,
			}
		},
		onShow(){
			_hook.routeTabBarHook();
		},
		onHide() {
			//清空search框
				this.$refs.searchBar.clear();
				this.keyword = this.list_data;
		},
		onLoad(option) {
			let _this = this;
			_this.list_id = option.list_id;
			
			let winHeight = uni.getSystemInfoSync().windowHeight;
			_this.itemHeight = winHeight / 26;
			_this.winHeight = winHeight;
			
					_this.init();
		},
		computed: {
			staticPhoto(){
				
				return _data.staticPhoto();
			}
		},
		methods: {
			init(){
				let _this = this;
				_this.$httpSend({
					path: '/message/groupMember',
					data: { list_id: _this.list_id,page:_this.page},
					success(data) {
						_this.page++;
						_this.list_data = [..._this.list_data,...data];
						_this.keyword = [..._this.keyword,...data];
						
					}
				});	
			},
			scrolltolower(){
				console.log('滚动到底部')
				this.init()
			},
			search(chat_msg) {
				let _this = this;
				
				_get.searchGroupFriends({
					'keyword': chat_msg,
					'list_id': _this.list_id
				}, function(data) {
					console.log(data,'tadata')
					let s=[];
					for (const key in data) {
						  if (data.hasOwnProperty(key)) {
							  for (const key2 in data[key]['data']) {
							  		s.push({
							  			id:'',
							  			nickname:data[key]['data'][key2]['name'],
							  			photo:data[key]['data'][key2]['photo'],
							  			user_id:data[key]['data'][key2]['user_id']
							  		})
							    
							  }
						  }
						
					
					  
					}
					
				
					_this.list_data = s;
					_this.keyword =s
				})
				
				
				// var sss = [];
				// for(var x in _this.list_data){
				// 	if(_this.list_data[x].nickname.indexOf(chat_msg) != -1){
				// 		sss.push(_this.list_data[x]);
				// 	}
				// }
				// _this.keyword = sss;
				
			},
			change(user_id){
				if(user_id){
					let i = this.add_user_ids.indexOf(user_id);
					if(i > -1){
						this.add_user_ids.splice(i,1);
					}else{
						this.add_user_ids.push(user_id);
					}
				}
			},
		},
		watch: {
			
		},
		onNavigationBarButtonTap(e) {
			let _this = this;
			if(_this.add_user_ids.length){
				_this.$httpSend({
					path: '/message/removeChat',
					data: { users: JSON.stringify(_this.add_user_ids),list_id: _this.list_id, },
					success_action: true,
					success(res) {
						uni.showToast({
							title: res.msg,
							duration: 2000,
							icon: 'none',
						});
						setTimeout(() => {
							uni.redirectTo({
								url: './more?list_id=' + _this.list_id,
							});
						},2000);
					}
				});
			}else{
				uni.redirectTo({
					url: './more?list_id=' + _this.list_id,
				});
			}
		}
	}
</script>

<style>
	
	.page {
		display: flex;
		flex-direction:row;
	}
	
	.scrollList {
		flex: 1;
		height: 100vh;
	}

	.uni-indexed-list-bar {
		width: 40upx;
		height: 100vh;
		background-color: #e7e7e7;
		display: flex;
		flex-direction: column;
	}

	.uni-indexed-list-bar.active {
		/* background-color: rgb(200, 200, 200); */
	}

	.uni-indexed-list-text {
		font-size: 22upx;
		text-align: center;
	}

	.uni-indexed-list-bar.active .uni-indexed-list-text {
		color: #333;
	}

	.uni-indexed-list-text.active,
	.uni-indexed-list-bar.active .uni-indexed-list-text.active {
		color: #02b300;
	}

	.uni-indexed-list-alert {
		position: absolute;
		z-index: 20;
		width: 160upx;
		height: 160upx;
		left: 50%;
		top: 50%;
		margin-left: -80upx;
		margin-top: -80upx;
		border-radius: 80upx;
		text-align: center;
		line-height: 160upx;
		font-size: 70upx;
		color: #fff;
		background-color: rgba(0, 0, 0, 0.5);
	}
	
	.header {
		display: flex;
		flex-direction: row;
		padding: 10px 15px;
		align-items: center;
	}
	
	.input-view {
		display: flex;
		align-items: center;
		flex-direction: row;
		background-color: #e7e7e7;
		height: 30px;
		border-radius: 5px;
		padding: 0 10px;
		flex: 1;
	}
	
	.input {
		flex: 1;
		padding: 0 5px;
		height: 24px;
		line-height: 24px;
		font-size: 16px;
	}
	
	.uni-list-cell-navigate {
		padding: 0;
	}
	
	.uni-media-list-body {
		height: auto;
	}
</style>